<template>
	<view class="u-page fullpage">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" :down="downOption">
			<!-- 用户信息 -->
			<view class="mine-bg">
				<image :src="`${assetsPath}/mine/bg.png`" mode="widthFix" class="bg"></image>
				<view class="top-arclight">
					<zx-nav color="#FFFFFF" :fixedTop="false" noHoldHeight noBack title="我的">
						<image @tap="navTo('/pages/mine/userinfo')" :src="`${assetsPath}/setting.png`" mode="widthFix" slot="left" class="set-icon"></image>
					</zx-nav>
					<view class="userinfo">
						<view class="flex align-center">
							<view class="pt10">
								<view v-if="isLogin"><u-avatar :size="112" :src="userInfo.wx_img ? userInfo.wx_img : `${assetsPath}/defaultAvatar.png`"></u-avatar></view>
								<view v-else @tap="login"><u-avatar :size="112"></u-avatar></view>
							</view>
							<view class="pl20" v-if="isLogin">
								<view class="flex flex-align-center">
									<text class="pr20 bold f-32">{{ userInfo.wx_name ? userInfo.wx_name : '用户' + userInfo.id }}</text>
								</view>
								<view class="state mt10" :class="{ vipState: userInfo.grade_id == 2 }">{{ userInfo.grade_id == 1 ? '普通会员' : 'PLUS会员' }}</view>
							</view>
							<view v-else class="pl20" @tap="login">登录/注册</view>
							<!-- 积分 -->
							<view class="score flex align-center" @tap="navTo('/pages/mine/score')">
								<view class="imgbox flex align-center justify-center"><image :src="`${assetsPath}/mine/score.png`" mode="widthFix"></image></view>
								<view>积分</view>
							</view>
						</view>

						<view class="flex align-center pt30 pd15">
							<view @tap="navTocate()" class="text-center flex-sub">
								<view class="num">{{ isLogin ? userInfo.folllow_common || 0 : '--' }}</view>
								<view>我的常用</view>
							</view>
							<view @tap="navTo('/pages/follow/follow')" class="text-center flex-sub">
								<view class="num">{{ isLogin ? userInfo.folllow_product || 0 : '--' }}</view>
								<view>我的关注</view>
							</view>
							<view @tap="navTo('/pages/couponlist/couponlist')" class="text-center flex-sub">
								<view class="num">{{ isLogin ? userInfo.coupons || 0 : '--' }}</view>
								<view>优惠券</view>
							</view>
						</view>
					</view>
				</view>
				<view class="memberbar">
					<view class="info flex justify-center align-center" @tap="navTo('/pages/mine/userCenter')">
						<view class="text">PLUS会员</view>
						<view class="line"></view>
						<view class="text">一年可省1万+</view>
						<view class="btn">立即开通</view>
					</view>
					<image class="topbgbox" :src="`${assetsPath}/mine/vip.png`"></image>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="main">
				<view class="orderbar card mt20">
					<view class="card-hd u-flex justify-between align-center">
						<view class="action">我的订单</view>
						<view class="more flex align-center" @tap="navTo('/pages/order/list')">
							<text>全部订单</text>
							<image :src="`${assetsPath}/right.png`" mode="widthFix"></image>
						</view>
					</view>
					<view class="card-bd u-flex justify-between align-center u-border-top">
						<view class="order-item flex-sub" v-for="(item, index) in orderList" :key="index" @tap="navTo(item.url)">
							<view class="imgbox">
								<view class="badge">
									<u-badge
										max="99"
										:value="ordernum[index]"
										:customStyle="{
											background: 'linear-gradient(90deg, #FF8173 0%, #FF3543 100%)',
											border: '1px solid #fff'
										}"
									></u-badge>
								</view>
								<image :src="item.img" mode="heightFix"></image>
							</view>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
				<!--客服-->
				<myassistant></myassistant>
				<!--菜单-->
				<view class="menulist flex align-center flex-wrap card mt20">
					<view class="menu-item" @tap="navTo(item.url, item.type)" v-for="(item, index) in menuList" :key="index" :class="{ mt40: index > 3 }">
						<image :src="item.img" mode="widthFix"></image>
						<view>{{ item.name }}</view>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
		</mescroll-body>
	</view>
</template>

<script>
import myassistant from '@/components/myassistant';
import { mapMutations, mapActions, mapState } from 'vuex';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';

export default {
	components: { myassistant },
	mixins: [MescrollMixin],
	data() {
		return {
			api_configs: {},
			orderList: [
				{
					img: '/static/mine/icon01.png',
					name: '待支付',
					url: '/pages/order/list?tabIndex=1'
				},
				{
					img: '/static/mine/icon02.png',
					name: '待发货',
					url: '/pages/order/list?tabIndex=2'
				},
				{
					img: '/static/mine/icon03.png',
					name: '待收货',
					url: '/pages/order/list?tabIndex=3'
				},
				{
					img: '/static/mine/icon04.png',
					name: '评价',
					url: '/pages/order/evaluate/list'
				},
				{
					img: '/static/mine/icon05.png',
					name: '售后',
					url: '/pages/order/afterSales/list'
				}
			],
			downOption: {
				auto: false
			},
			upOption: {
				use: false,
				empty: {
					use: false // 是否显示空布局
				}
			},
			menuList: [
				{
					img: '/static/mine/icon06.png',
					name: '分享赚钱',
					url: '/pages/freshBean/invite'
				},
				{
					img: '/static/mine/icon07.png',
					name: '新手帮助',
					url: '/pages/article/details?id=6'
				},
				{
					img: '/static/mine/icon08.png',
					name: '售后规则',
					url: '/pages/article/details?id=9'
				},
				{
					img: '/static/mine/icon09.png',
					name: '我的钱包',
					url: '/pages/mine/wallet'
				},
				{
					img: '/static/mine/icon10.png',
					name: '地址管理',
					url: '/pages/address/address'
				},
				{
					img: '/static/mine/icon11.png',
					name: '交易规则',
					url: '/pages/article/details?id=1'
				},
				{
					img: '/static/mine/icon12.png',
					name: '意见反馈',
					url: '/pages/feedback/feedback'
				},
				{
					img: '/static/mine/icon13.png',
					name: '帮助中心',
					url: '/pages/help/help'
				},

				{
					img: '/static/mine/icon15.png',
					name: '我要供货',
					url: '/pages/article/details?id=10'
				},
				{
					img: '/static/mine/city.png',
					name: '城市合伙人',
					url: '/pages/myStore/myStore'
				},
				{
					img: '/static/mine/icon16.png',
					name: '老版本入口',
					url: '',
					type: 'navigateToMiniProgram'
				}
			]
		};
	},
	mixins: [MescrollMixin],
	computed: {
		...mapState(['isLogin', 'userInfo', 'CustomBar']),
		ordernum() {
			let numlist = [];
			for (var key in this.userInfo.order) {
				numlist.push(this.userInfo.order[key]);
			}
			return numlist;
		}
	},
	onShow() {
		// if (!this.isLogin) {
		// 	this.login();
		// }
	},
	methods: {
		...mapMutations(['SET_CATEID', 'setCartNum']),
		...mapActions(['getUserInfo']),
		downCallback() {
			if (this.isLogin) {
				this.getUserInfo().then(da => {
					this.mescroll.endBySize(0, 0);
				});
			} else {
				setTimeout(() => {
					this.mescroll.endBySize(0, 0);
				}, 500);
			}
		},
		navTo(path, type) {
			if (!type) {
				type = 'navigateTo';
			}
			if (type == 'navigateToMiniProgram') {
				wx.navigateToMiniProgram({
					appId: 'wxab00333aa57fe460',
					path: 'pages/cross/route'
				});
				return;
			}
			if (this.isLogin) {
				if (path == '/pages/myStore/myStore' && this.userInfo.is_hhr == 2) {
					uni[type]({
						url: '/pages/article/details?id=22'
					});
				} else {
					uni[type]({
						url: path
					});
				}
			} else {
				this.login(path);
			}
		},
		login(path) {
			this.$Router.push({
				path: '/pages/login/login',
				query: {
					backtype: path ? 1 : 2,
					backpage: path || '/pages/mine/mine'
				}
			});
		},
		navTocate(cate) {
			this.SET_CATEID('follow');
			this.navTo('/pages/classify/classify', 'switchTab');
		}
	}
};
</script>

<style scoped lang="scss">
.mine-bg {
	position: relative;
	.bg {
		position: relative;
		left: 0;
		width: 100%;
		top: 0;
	}
	.set-icon {
		width: 43upx;
		height: 43upx;
	}
	.top-arclight {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		color: #fff;
	}
	.userinfo {
		padding: 20upx 35upx;
		position: relative;
		.num {
			font-size: 36upx;
			font-weight: 500;
			line-height: 50upx;
			margin-bottom: 8upx;
		}
		.score {
			color: #ffffff;
			font-weight: 500;
			position: absolute;
			right: 44upx;
			top: 50upx;
			.imgbox {
				width: 54upx;
				height: 54upx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 100%;
				padding: 10upx 13upx;
				margin-right: 13upx;
				image {
					width: 28upx;
					height: 34upx;
					display: block;
				}
			}
		}
	}
	.memberbar {
		position: absolute;
		z-index: 11;
		left: 50%;
		transform: translateX(-50%);
		bottom: 8upx;
		width: 680upx;
		height: 89upx;

		.info {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.line {
				width: 2upx;
				height: 28upx;
				background: #ffbc03;
				margin: 0 27upx 0 16upx;
			}
			.text {
				background: linear-gradient(180deg, #ffe6a3 0%, #ffbc03 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				height: 40upx;
			}
			.btn {
				width: 132upx;
				height: 52upx;
				background: #ffda00;
				font-weight: 500;
				color: #2c3664;
				line-height: 52upx;
				border-radius: 26upx;
				font-size: 24upx;
				text-align: center;
				margin-left: 37upx;
			}
		}

		.topbgbox {
			z-index: -1;
			position: relative;
			width: 100%;
			height: 100%;
			display: block;
		}
	}
}
.arc-main {
	min-height: 300rpx;
	overflow: hidden;
}
.card {
	padding: 0 24upx;
	.card-hd {
		padding: 24upx 0;
		color: #000;
		.action {
			font-weight: 500;
		}
	}
	.more {
		color: #48484a;
		font-size: 24upx;
		image {
			display: inline-block;
			width: 24upx;
			height: 24upx;
			margin-left: 8upx;
		}
	}
}
.card-bd {
	padding: 47upx 0 33upx;
}
.order-item {
	font-size: 26upx;
	text-align: center;
	.imgbox {
		position: relative;
		image {
			display: block;
			width: 100%;
			height: 40upx;
			margin: 0 auto 14upx;
		}
		.badge {
			position: absolute;
			z-index: 1;
			top: -10upx;
			left: calc(50% + 10upx);
		}
	}
}
.menulist {
	padding: 28upx 0;
	.menu-item {
		width: 25%;
		text-align: center;
		color: $u-main-color;
		font-size: 26upx;
		image {
			display: block;
			width: 78upx;
			height: 86upx;
			margin: 0 auto 7upx;
		}
	}
}
.state {
	color: #fff;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 100%;
	font-size: 24upx;
	width: 126upx;
	height: 36upx;
	border-radius: 18upx;
	text-align: center;
	line-height: 36upx;
	&.vipState {
		color: #ffda00;
		font-size: 22upx;
		background: #2c3664;
	}
}
</style>
